<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <div class="top">
      <van-icon name="arrow-left" @click="returnTap" />
      <span>小明</span>
      <van-icon name="ellipsis" @click="nextTap" />
    </div>
    <!-- <div>
      <div class="messageleft">
        <img
          @click="mineTap"
          class="messageleftimg1"
          src="../../assets/images/logo.png"
          alt=""
        />
        <img
          class="messageleftimg2"
          src="../../assets/images/card.png"
          alt=""
        />
      </div>
      <div class="messageright">
        <img
          @click="peoplemoreTap"
          class="messageleftimg1"
          src="../../assets/images/logo.png"
          alt=""
        />
        <img
          class="messageleftimg2"
          src="../../assets/images/card.png"
          alt=""
        />
      </div>
      <div class="messageright">
        <img
          @click="peoplemoreTap"
          class="messageleftimg1"
          src="../../assets/images/logo.png"
          alt=""
        />
        <div class="messageleftText">是的</div>
      </div>
    </div> -->
    <div class="msg" @click="showjianpan = 0">
      <div v-for="(item, index) in msgList" :key="index">
        <div>
          <div class="right_msg" v-if="item.own == 1">
            <div class="content demo" @click="contentBtn(index)">
              <span v-if="item.type == 'text'">{{ item.content }}</span>
              <img
                v-if="item.type == 'voice'"
                src="../../../static/images/yuyin.png"
                alt=""
                class="yuyin_right"
              />
              <div class="long_box" v-if="item.showbtn">
                <span class="long_btn" @click="bnt(1, index)">撤回</span>
                <span class="bot_l"></span>
                <span class="long_btn" @click="bnt(2, index)">收藏</span>
                <span class="bot_l"></span>
                <span class="long_btn" @click="bnt(3, index)">删除</span>
                <span class="bot_l" v-if="item.type == 'voice'"></span>
                <span
                  class="long_btn"
                  v-if="item.type == 'voice'"
                  @click="bnt(4, index)"
                  >转换</span
                >
              </div>
            </div>

            <img
              @click="mineTap"
              src="../../../static/images/me/headimg.png"
              alt=""
              class="headimg"
            />
          </div>
        </div>
        <div v-if="item.own == 2" style="margin: 20px 0">
          <div class="left_msg">
            <img
              @click="peoplemoreTap"
              src="../../../static/images/me/headimg.png"
              alt=""
              class="headimg"
            />
            <div class="content bg_fff demo1" @click="contentBtn(index)">
              <span v-if="item.type == 'text'">{{ item.content }}</span>
              <img
                v-if="item.type == 'voice'"
                src="../../../static/images/yuyin.png"
                alt=""
                class="yuyin_left"
              />
              <div class="long_box_left" v-if="item.showbtn">
                <!-- <span class="long_btn" @click="bnt(1, index)">撤回</span> -->
                <!-- <span class="bot_l"></span> -->
                <span class="long_btn" @click="bnt(2, index)">收藏</span>
                <!-- <span class="bot_l"></span> -->
                <!-- <span class="long_btn" @click="bnt(3, index)">删除</span> -->
                <span class="bot_l" v-if="item.type == 'voice'"></span>
                <span
                  class="long_btn"
                  v-if="item.type == 'voice'"
                  @click="bnt(4, index)"
                  >转换</span
                >
              </div>
            </div>
          </div>
          <span class="tips" v-if="item.type == 'voice' && showTips"
            >开发者最帅</span
          >
        </div>

        <div
          class="mode_pop"
          @click="closebtn(index)"
          v-if="item.showbtn"
        ></div>
        <div class="low_lon" v-if="item.own == 3">你撤回了一条信息</div>
      </div>
    </div>

    <div class="button" :style="showjianpan == 1 ? 'bottom:240px' : 'bottom:0'">
      <div class="buttonA">
        <div class="icon1">
          <img src="../../../static/images/come.png" @click="volumeBtn" class="jianpan_t" v-if="isCome" alt="">
          <van-icon name="volume-o" @click="volumeBtn" v-else />
        </div>
        <input
          type="text"
          @focus="dianjiTap"
          v-model="inputModel"
          class="button_input"
          v-if="!isCome"
        />
        <div  class="button_input mote"
        @touchstart.stop.prevent="touchstart"
         
          
          @touchend.stop.prevent="touchend"
         v-else> 按住 说话</div>
        <div class="icon1">
          <van-icon name="smile-o" @click="biaoqingTap" />
        </div>
        <div class="icon1">
          <van-icon @click="smellTap" name="add-o" />
        </div>
      </div>
      <div class="buList" v-if="showjianpan == 0 && showmodel == 1">
        <div class="buList1" @click="photograph()">
          <div class="buListicon"><van-icon name="photo" /></div>
          <span>照片</span>
        </div>
        <div class="buList1" style="position:relative">
          <div class="buListicon"><van-icon name="photo-fail" /></div>
          <span>拍摄</span>
           <input type="file" class="input_img "  accept="image/*"  @change="getImg($event,index)">
        </div>
        <div class="buList1" @click="show = true">
          <div class="buListicon"><van-icon name="location" /></div>
          <span>位置</span>
        </div>
        <div class="buList1" @click="shoucangTap">
          <div class="buListicon"><van-icon name="star" /></div>
          <span>收藏</span>
        </div>
        <div class="buList1" @click="gerenTap">
          <div class="buListicon"><van-icon name="manager" /></div>
          <span>个人名片</span>
        </div>
        <div class="buList1" @click="wenjianTap">
          <div class="buListicon"><van-icon name="card" /></div>
          <span>文件</span>
        </div>
        <div class="buList1" @click="show1 = true">
          <div class="buListicon"><van-icon name="live" /></div>
          <span>视频通话</span>
        </div>
      </div>
      <div class="buList" v-if="showjianpan == 0 && showmodel == 2">
        <div class="buLista">
          <ul>
            <li
              v-for="(item, index) in faceList"
              :key="index"
              @click="getBrow(index)"
            >
              {{ item }}
            </li>
          </ul>
          <!-- <div class="bubtn1"></div> -->
          <!-- <div class="bubtn1">发送</div> -->
        </div>
      </div>
      <van-overlay
        :show="show"
        @click="show = false"
        style="background: rgba(30, 30, 30, 0.5)"
      >
        <div class="wrapper" @click.stop>
          <div class="block">
            <div class="blockOne" @click="fasongTap">发送位置</div>
            <div class="blockOne block1" @click="gongxiangTap">
              共享实时位置
            </div>
            <div class="blockOne" @click="show = false">取消</div>
          </div>
        </div>
      </van-overlay>
      <van-overlay
        :show="show1"
        @click="show1 = false"
        style="background: rgba(30, 30, 30, 0.5)"
      >
        <div class="wrapper" @click.stop>
          <div class="block">
            <div class="blockOne">视频通话</div>
            <div class="blockOne block1">语音通话</div>
            <div class="blockOne" @click="show1 = false">取消</div>
          </div>
        </div>
      </van-overlay>
    </div>

    <div class="success_icon" v-if="showSuccess">
      <img src="../../../static/images/me/success.png" alt="" />
      <span>收藏成功</span>
    </div>
    <van-action-sheet
      v-model="showshc"
      :actions="actions"
      cancel-text="取消"
      @select="onSelect"
      :description="description"
      close-on-click-action
    />
    <input
      id="upload_file"
      type="file"
      style="display: none"
      accept="image/*"
      name="file"
      @change="fileChange($event)"
    />

    <div class="record" v-if="recording">
      <img
        src="http://sucai.suoluomei.cn/sucai_zs/images/20190911111650-record.gif"
        alt
        class="recordImg"
      />
    </div>
  </div>
</template>
<script>
import Return from "../../components/return";
import $ from "jquery";
const emojis = [
  "😀",
  "😄",
  "😅",
  "🤣",
  "😂",
  "😉",
  "😊",
  "😍",
  "😘",
  "😜",
  "😝",
  "😏",
  "😒",
  "🙄",
  "😔",
  "😴",
  "😷",
  "🤮",
  "🥵",
  "😎",
  "😮",
  "😰",
  "😭",
  "😱",
  "😩",
  "😡",
  "💀",
  "👽",
  "🤓",
  "🥳",
  "😺",
  "😹",
  "😻",
  "🤚",
  "💩",
  "👍",
  "👎",
  "👏",
  "🙏",
  "💪",
  "😀",
  "😄",
  "😅",
  "🤣",
  "😂",
  "😉",
  "😊",
  "😍",
  "😘",
  "😜",
  "😝",
  "😏",
  "😒",
  "🙄",
  "😔",
  "😴",
  "😷",
  "🤮",
  "🥵",
  "😎",
  "😮",
  "😰",
  "😭",
  "😱",
  "😩",
  "😡",
  "💀",
  "👽",
  "🤓",
  "🥳",
  "😺",
  "😹",
  "😻",
  "🤚",
  "💩",
  "👍",
  "👎",
  "👏",
  "🙏",
  "💪",
];
export default {
  components: {
    Return,
  },
  data() {
    return {
      recording:false,
      isCome:false,
      faceList: emojis,
      screenWidth:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth,
      screenHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
      showjianpan: 0,
      inputModel: "",
      showmodel: 0,
      show: false,
      show1: false,
      showSuccess: false,
      showshc: false,
      actions: [],
      actions1: [{ name: "删除", color: "#E85C6A", id: 1 }],
      actions2: [{ name: "撤回", color: "#E85C6A", id: 2 }],
      description: "",
      msgList: [
        { own: 1, type: "text", content: "你说啥？", showbtn: false },
        { own: 2, type: "text", content: "我没说啥？", showbtn: false },

        { own: 2, type: "voice", content: "", showbtn: false },
        { own: 3, type: "voice", content: "", showbtn: false },
      ],
      showTips: false,
      indexId: 0,
      thisVideo: null,
      thisContext: null,
      thisCancas: null,
    };
  },
  created() {
    // console.log(emojis)
  },
  methods: {
     touchstart() {
     this.recording = true
   
    },
    touchend(){
this.recording = false
    },
    volumeBtn(){
this.isCome = !this.isCome
},
    fileClick() {
      $("#upload_file").click();
    },
    fileChange(el) {
      this.files = $("#upload_file").get(0).files;
      console.log(this.files.length);
      for (let i = 0; i < this.files.length; i++) {
        this.datas.append("file", this.files[i]);
      }
      this.show1 = false;
      console.log(typeof this.files);
      console.log(this.files);
      if (!el.target.files[0].size) return;
      this.fileList(el.target);
      el.target.value = "";
    },
    // 调用摄像头权限
     getImg(event,index){
           let that = this

        let files = event.target.files[0];

         //创建读取文件的对象
            var file = new FileReader();//文件读取
            //分析文件对象
            file.readAsDataURL(files);
            //文件加载成功
            file.onload = function(e){
                console.log('这是======》',this.result); /*获取bese路径*/
                if(/image/.test(this.result)){   //或者 e.targin.result     
                console.log('ndfnfn')     
                    
                 that.listImg[index].imgsrc    = this.result; 
                //  that.$set(that.list,index,that.list[index])     
                //  console.log(that.list)                                     
                }
            }
      },
    // 表情
    faceContent() {
      this.faceShow = !this.faceShow;
      if (this.faceShow == true) {
        for (let i in appData) {
          this.faceList.push(appData[i].char);
          // console.log(JSON.stringify(this.faceList));
        }
      } else {
        this.faceList = [];
      }
    },
    // 获取用户点击之后的标签 ，存放到输入框内
    getBrow(index) {
      console.log("index", index);
      for (let i in this.faceList) {
        if (index == i) {
          this.getBrowString = this.faceList[index];
          this.value += this.getBrowString;
        }
      }
    },

    onSelect(item) {
      console.log(item.id);
      if (item.id == 2) {
        this.msgList[this.indexId].own = 3;
        return false;
      }
      this.msgList.splice(this.indexId, 1);
    },
    contentBtn(index) {
      console.log(index);
      this.msgList[index].showbtn = true;
    },
    closebtn(index) {
      this.msgList[index].showbtn = false;
    },
    bnt(id, index) {
      this.indexId = index;
      let that = this;
      this.closebtn(index);

      if (id == 2) {
        this.showSuccess = true;
        setTimeout(function () {
          that.showSuccess = false;
        }, 2000);
      }
      if (id == 3) {
        this.showshc = true;
        this.actions = this.actions1;
        this.description = "是否删除该消息？";
      }
      if (id == 1) {
        this.showshc = true;
        this.actions = this.actions2;
        this.description = "是否撤回该消息？";
      }
      if (id == 4) {
        this.showTips = true;
      }
    },

    returnTap() {
      this.$router.go(-1);
    },
    nextTap() {
      this.$router.push("/messageall");
    },
    peoplemoreTap() {
      this.$router.push("/head");
    },
    mineTap() {
      this.$router.push("/headmine");
    },
    dianjiTap() {
      this.showjianpan = 1;
      this.showmodel = 0;
      console.log(1111);
    },
    smellTap() {
      this.showjianpan = 0;
      this.showmodel = 1;
    },
    biaoqingTap() {
      this.showjianpan = 0;
      this.showmodel = 2;
    },
    fasongTap() {
      this.$router.push("/address");
    },
    gongxiangTap() {
      this.$router.push("/addressA");
    },
    shoucangTap() {
      this.$router.push("/shoucang");
    },
    gerenTap() {
      this.$router.push("/qunliao");
    },
    wenjianTap() {
      this.$router.push({ path: "/shoucangmore", query: { type: 3 } });
    },
  },
};
</script>
<style scoped>
.record {
  position: fixed;
  top: 30%;
  left: 0px;
  right: 0px;
  width: 150px;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
}

.recordImg {
  width: 150px;
  height: 150px;
}
.jianpan_t{
  width: 25px;
  height: 25px;
}
.mote{
  text-align: center;
  background: #fff;
  line-height: 40px;
  }
.buLista {
  width: 100%;
  height: 300px;
  background: #e6e6e6;
  position: absolute;
  bottom: 0px;
  overflow: scroll;
}

.bubtn1 {
  position: fixed;
  right: 20px;
  bottom: 50px;
  background: #fff;
  height: 30px;
  width: 50px;
  line-height: 30px;
  text-align: center;
  border-radius: 5px;
  font-size: 14px;
}
.buLista ul {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
.buLista ul li {
  width: 14%;
  font-size: 26px;
  list-style: none;
  text-align: center;
}

.all {
  background: #eeeeee;
}
.top {
  height: 60px;
  width: 90%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 60px;
  position: relative;
  background: #4ac7d7;
  color: white;
}
.button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #e1e0e1;
  border-top: 1px solid #ccc;
}
.buttonA {
  display: flex;
  align-items: center;
  height: 60px;
  width: 100%;
}
.icon1 {
  width: 12%;
  text-align: center;
  font-size: 28px;
}
.button_input {
  width: 64%;
  height: 40px;
  border: none;
  border-radius: 5px;
}
.messageleft {
  height: 100px;
  display: flex;
  width: 94%;
  margin-left: 3%;
  justify-content: right;
  flex-direction: row-reverse;
  margin-top: 10px;
}
.messageright {
  height: 100px;
  display: flex;
  width: 94%;
  margin-left: 3%;
  justify-content: right;
  margin-top: 10px;
}
.messageright .messageleftimg2 {
  margin-left: 10px;
}
.messageleftimg2 {
  width: 60px;
  height: 100px;
  border-radius: 5px;
  margin-right: 10px;
}
.messageleftimg1 {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
.messageleftText {
  height: 40px;
  background: #fff;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  padding: 0 10px;
  margin-left: 10px;
}
.buList {
  height: 300px;
  width: 100%;
  background: #f5f5f5;
  display: flex;
  flex-wrap: wrap;
}
.buList1 {
  width: 25%;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.buListicon {
  width: 80px;
  height: 80px;
  background: #ffffff;
  text-align: center;
  align-items: center;
  font-size: 30px;
  line-height: 80px;
}
.block {
  height: 215px;
  width: 100%;
  position: fixed;
  right: 0px;
  bottom: 0px;
  z-index: 100;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  z-index: 999;
}
.blockOne {
  height: 68px;
  width: 100%;
  text-align: center;
  line-height: 68px;
}
.block1 {
  /* border-bottom: 5px solid #bebebe; */
}
.right_msg {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin: 20px 0;
}
.headimg {
  width: 50px;
  height: 50px;
  margin: 0 10px;
}
.content {
  position: relative;
  max-width: 220px;
  background: #96ec68;
  padding: 10px;
  border-radius: 5px;
  display: flex;
}
.bg_fff {
  background: #fff;
}
.demo1 {
  position: relative;
}

.demo1:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: -8px;
  top: 10px;
  border-top: solid 8px transparent;
  border-right: solid 8px white; /* 白色小三角形 */
  border-bottom: solid 8px transparent;
}
.demo {
  position: relative;
}
.demo:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: -8px;
  top: 10px;
  border-top: solid 8px transparent;
  border-left: solid 8px #96ec68; /* 黑色大三角形 */
  border-bottom: solid 8px transparent;
}
.left_msg {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 10px 0;
}
.bottom_box {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #fff;
  height: 120px;
}
.tip_slider {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 50px;
  padding: 0 30px;
}
.fonz_30 {
  font-size: 30px;
}
.long_box {
  position: absolute;
  height: 20px;
  /* width:120px ; */
  top: -30px;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  font-size: 12px;
}
.long_box_left {
  position: absolute;
  height: 20px;
  /* width:120px ; */
  top: -30px;
  left: 0;
  z-index: 100;

  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  font-size: 12px;
}
.long_box:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 20px;
  bottom: -8px;
  border-right: solid 8px transparent;
  border-left: solid 8px transparent; /* 黑色大三角形 */
  border-top: solid 8px #000;
}
.long_box_left:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 20px;
  bottom: -8px;
  border-right: solid 8px transparent;
  border-left: solid 8px transparent; /* 黑色大三角形 */
  border-top: solid 8px #000;
}
.bot_l {
  width: 1px;
  height: 15px;
  background: #e3e4e5;
  margin: 0 10px;
}
.long_btn {
  width: 30px;
  text-align: center;
}

.success_icon {
  background: #fff;
  width: 110px;
  height: 110px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
}
.success_icon img {
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
}
.low_lon {
  color: #b5b5b5;
  font-size: 12px;
  text-align: center;
}
.yuyin_right {
  width: 25px;
  height: 25px;
  transform: rotate(180deg);
  padding-right: 30px;
}
.yuyin_left {
  width: 25px;
  height: 25px;
  /* transform:rotate(180deg); */
  padding-right: 30px;
}
.mode_pop {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}
.tips {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  margin-left: 80px;
  /* margin-top: -20px; */
}
.input_img{
position: absolute;
width: 95%;
height: 50%;
top: 10px;
opacity: 0;
}
</style>